
<template>
  <swiper class="swipers" :options="swiperOption">
    <!-- <swiper-slide v-for="(item,index) in picUrl" :key="index"><img :src="item.picUrl" alt=""></swiper-slide> -->
    <swiper-slide v-for="(item,index) in picUrl" :key="index" :style="{backgroundImage:`url(${item.picUrl})`}"></swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  name: 'swiper-example-loop',
  title: 'Loop mode / Infinite loop',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      picUrl: [],
      swiperOption: {
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    };
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper;
    // },
    getPicUrl() {
      return this.$store.state.picUrl;
    }
  },
  watch: {
    getPicUrl(val) {
      this.picUrl = val;
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.swipers {
  // width: 100%;
  // height: 150px;
  height: 200px;
  img {
    display: block;
    width: 100%;
    height: 150px;
  }
  .swiper-slide {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
</style>
 

